// import util from '@/libs/util'
import dayjs from 'dayjs'
// import qs from 'qs'

export default {
  data () {
    return {
      // 设置属性
      mixinViewModuleOptions: {
        activatedIsNeed: true, // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListUrl: '', // 数据列表接口，API地址
        isPage: true, // 数据列表接口，是否需要分页？
        el_table: true, // 是否el-table
        deleteUrl: '', // 删除接口，API地址
        batchDelKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportUrl: '', // 导出接口，API地址
        addUrl: '', // 新增
        updateUrl: '' // 修改
      },
      // 查询条件
      searchForm: {
        sortMap: {} // 排序，asc／desc
      },
      dataList: [], // 数据列表
      page: 1, // 当前页码
      limit: 10, // 每页数
      total: 0, // 总条数
      layouts: ['Total', 'Sizes', 'FullJump', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump'], // 页脚分页布局
      dataListLoading: false, // 数据列表，loading状态
      dataListSelections: [], // 数据列表，多选项
      batchBtnDisabled: true, // 批量按钮禁用
      showSearch: true, // 是否显示查询
      headerCellStyle: { background: '#eef1f6', color: '#606266' }, // 表头样式
      ref: 'tableRef', // 表格对象
      cloumn_all_checked: true // 列全选
    }
  },
  created () {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
      this.getDataList()
    }
  },
  beforeUpdate () {
    if (this.mixinViewModuleOptions.el_table) {
      this.$nextTick(() => { // 在数据加载完，重新渲染表格--防止过滤列时表格抖动
        this.$refs[this.ref].doLayout()
      })
    }
  },
  computed: {
    /* 这里使用了getter和setter，这样写的好处不用自己手动监听复选框的选中事件 */
    checkedTableColumns: {
      get () {
        // 返回选中的列名
        var zero = []
        for (var column in this.showColumns) {
          if (this.showColumns[column].show) {
            zero.push(column)
          }
        }
        return zero
      },
      set (checked) {
        var i = 0
        // 设置表格列的显示与隐藏
        for (var column in this.showColumns) {
          // 如果选中，则设置列显示
          if (checked.includes(column)) {
            this.showColumns[column].show = true
          } else {
            // 如果未选中，则设置列隐藏
            this.showColumns[column].show = false
            i++
          }
        }
        this.cloumn_all_checked = i === 0
      }
    }
  },
  methods: {
    cloumnAllChecked (data) {
      this.cloumn_all_checked = data
      for (var column in this.showColumns) {
        this.showColumns[column].show = this.cloumn_all_checked
      }
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.searchForm.page = this.mixinViewModuleOptions.isPage ? this.page : null
      this.searchForm.pageSize = this.mixinViewModuleOptions.isPage ? this.limit : null
      const config = {
        url: this.mixinViewModuleOptions.getDataListUrl,
        method: 'post',
        data: this.searchForm
      }
      this.$axios(config).then(res => {
        this.dataListLoading = false
        this.dataList = res.data
        this.total = res.total
      }).catch(() => {
        this.handleDataCatch()
      })
    },
    // 处理获取数据接口异常
    handleDataCatch () {
      this.dataList = []
      this.total = 0
      this.dataListLoading = false
    },
    // 多选---del
    dataListCheckboxChangeHandle ({ selection }) {
      this.dataListSelections = selection
      this.batchBtnDisabled = this.dataListSelections.length <= 0
    },
    // 多选
    dataListSelectionChangeHandle (val) {
      this.dataListSelections = val
      this.batchBtnDisabled = this.dataListSelections.length <= 0
    },
    // 排序
    dataListSortChangeHandle (data) {
      this.searchForm.sortMap = {}
      if (!data.order || !data.prop) {
        this.searchForm.sortMap = {}
      } else {
        const key = data.prop
        const vaule = data.order.replace(/ending$/, '')
        this.searchForm.sortMap = { [key]: vaule }
      }
      this.getDataList()
    },
    // 分页, 每页条数
    pageSizeChangeHandle (val) {
      this.page = 1
      this.limit = val
      this.getDataList()
    },
    // 分页, 当前页
    pageCurrentChangeHandle (val) {
      this.page = val
      this.getDataList()
    },
    // 分页, 首页
    firstPageHandle (val) {
      this.page = 1
      this.getDataList()
    },
    // 分页, 尾页
    lastPageHandle (val) {
      this.page = Math.ceil(this.total / this.limit) // 总页数
      this.getDataList()
    },
    // [分页] 切换事件
    handlePageChange ({ currentPage, pageSize }) {
      this.page = currentPage
      this.limit = pageSize
      this.getDataList()
    },
    /**
     *
     * 考虑的情况和逻辑实现
     * 1.可编辑表格
     *  1.1单个删除
     *    1.1.1当row中主键存在时执行数据库删除
     *    1.1.2当row中主键不存在时执行dom删除
     *  1.2批量删除
     *    1.2.1遍历dataListSelections对象,筛选出有主键或没主键的两个集合
     *    1.2.2
     *
     *
     * 2.不可编辑表格
     *  2.1批量删除和单个删除
     * @param {*} row
     * @param {*} name
     * @param {*} ref
     */
    deleteHandle (row, name, ref) {
      // 是否存在删除dom
      var isExistDom = false
      const data = []
      // 判断是否有删除数据
      if (this.dataListSelections.length <= 0 && !row) {
        return this.$message({
          message: this.$t('prompt.deleteBatch'),
          type: 'warning',
          showClose: true,
          duration: 500
        })
      }
      if (row) { // 单个删除
        if (row[this.mixinViewModuleOptions.batchDelKey]) {
          data.push({ id: row[this.mixinViewModuleOptions.batchDelKey] })
        } else {
          this.$confirm('您确定要删除该数据?', '提示', {
            cancelButtonClass: 'btn-custom-cancel',
            type: 'warning',
            closeOnClickModal: false
          }).then(() => {
            this.$refs[ref].remove(row)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
          return
        }
      } else { // 批量删除
        this.dataListSelections.map(e => {
          if (e[this.mixinViewModuleOptions.batchDelKey]) {
            data.push({ id: e[this.mixinViewModuleOptions.batchDelKey] })
          } else {
            isExistDom = true
          }
        })
      }
      if (isExistDom) {
        if (data.length > 0) {
          this.delete(data, name, ref)
        } else {
          this.$confirm('正在批量删除, 是否继续?', '提示', {
            cancelButtonClass: 'btn-custom-cancel',
            type: 'warning',
            closeOnClickModal: false
          }).then(() => {
            this.$refs[ref].removeCheckboxRow()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      } else {
        this.delete(data, name)
      }
    },
    // 调用接口删除
    delete (data, name, ref) {
      const delMsg = name ? '正在删除 [' + name + ']  是否继续?' : '正在批量删除, 是否继续?'
      this.$confirm(delMsg, '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        this.dataListLoading = true
        const config = {
          url: this.mixinViewModuleOptions.deleteUrl,
          method: 'post',
          data: data
        }
        this.$axios(config).then(res => {
          if (ref) {
            this.$refs[ref].removeCheckboxRow()
          }
          this.dataListLoading = false
          this.calculationPage(this.dataListSelections.length > 0 ? this.dataListSelections.length : 1)
          this.getDataList()
          this.$message.success(res.msg)
        }).catch(() => {
          this.dataListLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除后计算分页
    calculationPage (delNum) {
      // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
      const totalPage = Math.ceil((this.total - delNum) / this.limit) // 总页数
      this.page = this.page > totalPage ? totalPage : this.page
      this.page = this.page < 1 ? 1 : this.page
    },
    // 导出
    exportHandle (fileName) {
      this.dataListLoading = true
      const config = {
        url: this.mixinViewModuleOptions.exportUrl,
        method: 'get',
        responseType: 'blob',
        params: {}
      }
      this.$axios(config)
        .then(res => {
          // 这里res.data是返回的blob对象
          const blob = new Blob([res], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
          })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = fileName + '.xlsx' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
          this.dataListLoading = false
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    dateFormat (row, column, cellValue) {
      return dayjs.unix(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    vxe_dateFormat (row) {
      if (row.cellValue) {
        return dayjs.unix(row.cellValue).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    searchSubmit () { // 查询
      this.page = 1
      this.getDataList()
    },
    searchResetForm () { // 重置输入框
      this.searchForm = {
        sortMap: {}
      }
      // 清空页面选择的排序按钮
      this.$refs[this.ref].clearSort()
      this.getDataList()
    },
    initDialog (ref, row, val) { // 初始化弹框，第三个参数配合业务使用
      this.$refs[ref].initDialog(row, val)
    }
  }
}
